<!-- 首页 -->
<template>
    <view class="page_box">
        <!-- <button type="default">{{ !showPrivacy }}------{{ showNoticeModal }}</button> -->
        <!-- 空白页 -->
        <shopro-empty v-if="noNetwork" :emptyData="noNetworkData" @click="onEmptyBtn"></shopro-empty>
        <shopro-empty v-else-if="!hasTemplate" :emptyData="emptyData"></shopro-empty>
        <view v-else class="page_box shopro-selector">
            <!-- 导航栏 -->
            <view class="head_box active" :style="{ background: bgcolor }">
                <cu-custom :isBack="true" :showBackIcon="false" v-if="info && info.name">
                    <block slot="backText"><!-- <text class="nav-title shopro-selector-rect">{{ info.name || '商城' }}</text> --></block>
                </cu-custom>
            </view>
            <view class="content_box" style="margin-top: -4rpx;overflow: hidden;">
                <scroll-view class="scroll-box" scroll-y scroll-with-animation enable-back-to-top>
                    <block v-if="template" v-for="(item, index) in template" :key="index">
                        <!-- 搜索 -->
                        <sh-search v-if="item.type === 'search'" :detail="item" :bgcolor="bgcolor"></sh-search>
                        <!-- 轮播 -->
                        <sh-banner v-if="item.type === 'banner'" :detail="item.content" @getbgcolor="getbgcolor"></sh-banner>
                        <!-- 菜单 -->
                        <sh-menu v-if="item.type === 'menu'" :detail="item.content" :menu="item.content.style" :imgW="94"></sh-menu>
                        <!-- 推荐商品 -->
                        <sh-hot-goods v-if="item.type === 'goods-list' || item.type === 'goods-group'" :detail="item.content"></sh-hot-goods>
                        <!-- 广告魔方 -->
                        <sh-adv v-if="item.type === 'adv'" :detail="item.content"></sh-adv>
                        <!-- 优惠券 -->
                        <sh-coupon v-if="item.type === 'coupons'" :detail="item.content"></sh-coupon>
                        <!-- 秒杀 -->
                        <sh-seckill v-if="item.type === 'seckill'" :detail="item.content"></sh-seckill>
                        <!-- 拼团 -->
                        <sh-groupon v-if="item.type === 'groupon'" :detail="item.content"></sh-groupon>
                        <!-- 富文本 -->
                        <sh-richtext v-if="item.type === 'rich-text'" :detail="item.content"></sh-richtext>
                        <!-- 功能列表 -->
                        <sh-nav v-if="item.type === 'nav-list'" :detail="item.content"></sh-nav>
                        <!-- 九宫格列表 -->
                        <sh-grid v-if="item.type === 'grid-list'" :detail="item.content"></sh-grid>
                        <!-- 功能标题 -->
                        <sh-title-card v-if="item.type === 'title-block'" :detail="item.content"></sh-title-card>
                        <!-- 个人信息 -->
                        <sh-userinfo v-if="item.type === 'user'" :detail="item.content"></sh-userinfo>
                        <!-- 钱包 -->
                        <sh-wallet v-if="item.type === 'wallet-card'" :detail="item.content"></sh-wallet>
                        <!-- 订单卡片 -->
                        <sh-order v-if="item.type === 'order-card'" :detail="item.content"></sh-order>
                        <!-- 直播 -->
                        <!-- #ifdef MP-WEIXIN -->
                        <sh-live v-if="item.type === 'live' && HAS_LIVE" :detail="item.content"></sh-live>
                        <!-- #endif -->
                    </block>
                </scroll-view>
            </view>

            <!-- 登录提示 -->

            <shopro-login-modal></shopro-login-modal>
            <!-- <shopro-login-modal1 :show="show"></shopro-login-modal1> -->
            <!-- <view class="cu-dialog"  v-model="show">
				<view class="modal-box">
					<image class="head-bg" :src="$IMG_URL + '/imgs/nologin_bg.png'" mode=""></image>
					<view class="detail">
						<view class="title1">您还未绑定手机号</view>
						<view class="title2">绑定即刻开启品质生活</view>
					</view>
					<view class="btn-box y-f">
						<button class="cu-btn login-btn" @tap="onLogin1">立即绑定</button>
						<button class="cu-btn close-btn" @tap="hideModal">取消</button>
					</view>
				</view>
			</view> -->
            <shopro-modal v-model="show" style="z-index: 88;" cathctouchmove>
                <block slot="modalContent">
                    <view class="cu-dialog">
                        <view class="modal-box">
                            <image class="head-bg" :src="'http://shopro.7wpp.com' + '/imgs/nologin_bg.png'" mode=""></image>
                            <view class="detail">
                                <view class="title1">您还未绑定手机号</view>
                                <view class="title2">绑定即刻开启品质生活</view>
                            </view>
                            <view class="btn-box y-f"><button class="cu-btn login-btn" @tap="onLogin1">立即绑定</button></view>
                        </view>
                    </view>
                </block>
            </shopro-modal>

            <!-- 自定义底部导航 -->
            <shopro-tabbar></shopro-tabbar>
            <!-- 关注弹窗 -->
            <shopro-float-btn></shopro-float-btn>
            <!-- 连续弹窗提醒 -->

            <shopro-notice-modal v-if="!showPrivacy && showNoticeModal"></shopro-notice-modal>
            <!-- 隐私协议 -->
            <!-- #ifdef APP-PLUS -->
            <view class="modal-wrap">
                <shopro-modal v-model="showPrivacy">
                    <block slot="modalContent">
                        <view class="service-contract-wrap">
                            <image class="service-head-img" :src="$IMG_URL + '/imgs/modal/servece_head.png'" mode="widthFix"></image>
                            <view class="service-title">用户隐私协议概况</view>
                            <view class="service-content ">
                                感谢您使用Shopro商城，我们非常重视您的个人信息和隐私保护，在您使用服务前，请仔细阅读
                                <text style="color: #EAB866;" @tap="jump('/pages/public/richtext', { id: 2 })">《Shopro商城隐私协议》</text>
                                ，我们将会严格按照经您同意的各项条款使用您的个人信息，以便为您提供更好的服务。
                            </view>
                            <view class="service-tip ">
                                如您同意此条款，请点击“同意”并开始使用我们的产品和服务，我们将尽全力保护您的个人信息安全。
                            </view>
                            <view class="btn-box x-c"><button class="cu-btn agree-btn" @tap="Agree">知道了</button></view>
                        </view>
                    </block>
                </shopro-modal>
            </view>
            <!-- #endif -->
        </view>
    </view>
</template>

<script>
import shSearch from './components/sh-search.vue';
import shBanner from './components/sh-banner.vue';
import shHotGoods from './components/sh-hot-goods.vue';
import shMenu from './components/sh-menu.vue';
import shAdv from './components/sh-adv.vue';
import shCoupon from './components/sh-coupon.vue';
import shSeckill from './components/sh-seckill.vue';
import shGroupon from './components/sh-groupon.vue';
import shRichtext from './components/sh-richtext.vue';
import shNav from './components/sh-nav.vue';
import shUserinfo from './components/sh-userinfo.vue';
import shGrid from './components/sh-grid.vue';
import shTitleCard from './components/sh-title-card.vue';
import shOrder from './components/sh-order.vue';
import shWallet from './components/sh-wallet.vue';
import shoproLoginModal1 from '../../components/shopro-login-modal1/shopro-login-modal1.vue';

// #ifdef MP-WEIXIN
import { HAS_LIVE } from '@/env';
import shLive from './components/sh-live.vue';
// #endif
import { mapMutations, mapActions, mapState } from 'vuex';

// #ifdef H5
import html2canvas from '@/common/utils/sdk/html2canvas.js';
let listenMove = document.body; //禁止手机h5下拉刷新带动整个页面。
let handle = function(e) {
    e.preventDefault();
};
// #endif

export default {
    components: {
        shoproLoginModal1,
        shSearch,
        shBanner,
        shUserinfo,
        shHotGoods,
        shTitleCard,
        shOrder,
        shWallet,
        shMenu,
        shAdv,
        shGrid,
        shCoupon,
        shSeckill,
        shGroupon,
        shRichtext,
        shNav,
        // #ifdef MP-WEIXIN
        shLive,
        // #endif
    },
    data() {
        return {
            bgcolor: '',
            // #ifdef MP-WEIXIN
            HAS_LIVE: HAS_LIVE,
            // #endif
            mode: '',
            showPrivacy: false,
            showNoticeModal: true,
            triggered: false, //下拉刷新
            _freshing: false, //下拉刷新状态
            emptyData: {
                img: this.$IMG_URL + '/imgs/empty/template_empty.png',
                tip: '暂未找到模板，赶快去装修吧~',
            },
            noNetworkData: {
                img: '/static/imgs/empty/empty_network.png',
                tip: '网络连接断开,请刷新重试~',
                pathText: '刷新重试',
                type: 'netWork',
            },
            netEmptyData: {},
            show: false, //uni.getStorageSync('userInfo').mobile
        };
    },
    computed: {
        ...mapState({
            initData: state => state.init.initData,
            template: state => state.init.templateData?.home,
            hasTemplate: state => state.init.hasTemplate,
            noNetwork: state => state.init.noNetwork,
            cartNum: state => state.cart.cartNum,
            forceOauth: state => state.user.forceOauth,
        }),
        popupIndex() {
            if (this.initData.popup) {
                return this.initData.popup.content.index;
            }
        },
        info() {
            if (this.initData.info) {
                // #ifndef MP-WEIXIN
                if (this.initData.info && this.initData.info.name) {
                    uni.setNavigationBarTitle({
                        title: this.initData.info.name,
                    });
                }
                // #endif
                return this.initData.info;
            }
        },
    },
    onPullDownRefresh() {
        this.init();
    },
    onLoad(options) {
		//在这里添加一段信息
		if (options.share_id) {
			uni.setStorageSync('share_id', options.share_id);
		}
		
        //this.showPrivacy = true;
        let that = this;
        // #ifdef APP-VUE
        if (!plus.runtime.isAgreePrivacy()) {
            this.showPrivacy = true;
            this.showNoticeModal = false;
        }
        // 监听设备网络状态变化事件，接口ios市场首次安装网络切换问题
        plus.globalEvent.addEventListener('netchange', function() {
            var nt = plus.networkinfo.getCurrentType(); //网络状态
            if (nt !== plus.networkinfo.CONNECTION_UNKNOW && nt !== plus.networkinfo.CONNECTION_NONE) {
                that.init();
            }
        });
        // #endif
    },
    mounted() {
        // #ifdef H5
        if (uni.getStorageSync('screenShot')) {
            this.screenShotPreviewImage();
        }
        // #endif
    },
    onShow() {
        this.$store.commit('CART_NUM', this.cartNum);
        let that = this;
        that.$api('user.info')
            .then(res => {
                let mobile = res.data.mobile;
                console.log('mobile :>> ', mobile);
                if (!mobile) {
                    this.show = true;
                } else {
                    this.show = false;
                }
            })
            .catch(err => {});
    },
    methods: {
        //...mapActions(['getAgent', 'getUserInfo']),

        onLogin1() {
            uni.navigateTo({
                url: '/pages/user/edit-phone',
            });
        },
        ...mapMutations(['CART_NUM']),
        ...mapActions(['getAppInit', 'getTemplate', 'getUserInfo']),
        // 初始化
        init() {
            return Promise.all([this.getAppInit(), this.getTemplate()]).then(() => {
                uni.stopPullDownRefresh();
            });
        },

        // 点击无网络按钮
        onEmptyBtn() {
            this.init();
        },

        // 获取轮播背景色
        getbgcolor(e) {
            this.bgcolor = e;
        },

        // 路由跳转
        jump(path, parmas) {
            this.$Router.push({
                path: path,
                query: parmas,
            });
        },

        // #ifdef APP-PLUS
        // 同意协议
        Agree() {
            plus.runtime.agreePrivacy();
            this.showPrivacy = false;
        },
        // #endif

        // #ifdef H5
        //装修模式屏幕截图
        screenShotPreviewImage() {
            let that = this;
            let div = window.window.document.getElementsByClassName('page_box');
            html2canvas(div[0], {
                x: 0,
                y: 0,
                scrollX: 0,
                scrollY: 0,
                backgroundColor: '#f6f6f6',
                foreignObjectRendering: true,
                allowTaint: false,
                taintTest: true,
                scale: 1,
                width: div[0].offsetWidth,
                height: div[0].offsetHeight,
                useCORS: true, //保证跨域图片的显示，如果为不添加改属性，或者值为false, 跨域的图片显示灰背景
            }).then(canvas => {
                let screenShotBase64 = canvas.toDataURL();
                that.$api('uploadBase64', { content: screenShotBase64 }).then(res => {
                    if (res.code === 1) {
                        that.$api('dev.asyncDecorateScreenShot', { shop_id: uni.getStorageSync('shop_id'), image: res.data.url });
                        uni.removeStorageSync('screenShot');
                        uni.removeStorageSync('shop_id');
                    }
                });
            });
        },
        // #endif
    },
};
</script>

<style lang="scss">
.modal-box {
    width: 100%;
    border-radius: 20rpx;
    background: #fff;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    padding-bottom: 30rpx;

    .head-bg {
        width: 100%;
        height: 210rpx;
    }

    .detail {
        .title1 {
            color: #46351b;
            font-size: 35rpx;
            font-weight: bold;
        }

        .title2 {
            font-size: 28rpx;
            color: #999;
            padding-top: 20rpx;
        }
    }

    .btn-box {
        margin-top: 80rpx;

        .login-btn {
            width: 492rpx;
            height: 70rpx;
            background: linear-gradient(90deg, rgba(233, 180, 97, 1), rgba(238, 204, 137, 1));
            box-shadow: 0px 7rpx 6rpx 0px rgba(229, 138, 0, 0.22);
            border-radius: 35rpx;
            font-size: 28rpx;
            color: rgba(#fff, 0.9);
        }

        .close-btn {
            width: 492rpx;
            height: 70rpx;
            color: #e9b766;
            font-size: 26rpx;
            margin-top: 20rpx;
            background: none;
        }
    }
}

// 小程序登录提醒

// 标题搜索栏
.active {
    // 动画时间跟随轮播组件动画时间
    transition: all linear 0.5s;
}
// 服务协议
.modal-wrap {
    /deep/ .cu-modal {
        z-index: 99999;
    }
}
.modal-box {
    // width: 610rpx;
    border-radius: 20rpx;
    background: #fff;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    padding-bottom: 30rpx;

    .head-bg {
        width: 100%;
        height: 210rpx;
    }

    .detail {
        .title1 {
            color: #46351b;
            font-size: 35rpx;
            font-weight: bold;
        }

        .title2 {
            font-size: 28rpx;
            color: #999;
            padding-top: 20rpx;
        }
    }

    .btn-box {
        margin-top: 80rpx;

        .login-btn {
            width: 492rpx;
            height: 70rpx;
            background: linear-gradient(90deg, rgba(233, 180, 97, 1), rgba(238, 204, 137, 1));
            box-shadow: 0px 7rpx 6rpx 0px rgba(229, 138, 0, 0.22);
            border-radius: 35rpx;
            font-size: 28rpx;
            color: rgba(#fff, 0.9);
        }

        .close-btn {
            width: 492rpx;
            height: 70rpx;
            color: #e9b766;
            font-size: 26rpx;
            margin-top: 20rpx;
            background: none;
        }
    }
}
.service-contract-wrap {
    background-color: #fff;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    width: 610rpx;
    min-height: 850rpx;
    border-radius: 20rpx;

    .service-title {
        font-size: 35rpx;
        font-family: PingFang SC;
        font-weight: bold;
        color: rgba(255, 255, 255, 1);
        line-height: 42rpx;
        background: linear-gradient(180deg, rgba(62, 48, 25, 1) 0%, rgba(109, 80, 40, 1) 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        margin-bottom: 30rpx;
    }
    .service-content {
        text-align: left;
        font-size: 26rpx;
        font-family: PingFang SC;
        font-weight: 500;
        color: rgba(102, 102, 102, 1);
        line-height: 50rpx;
        padding: 0 40rpx;
    }
    .service-tip {
        text-align: left;
        font-size: 26rpx;
        font-family: PingFang SC;
        font-weight: 500;
        color: rgba(154, 154, 154, 1);
        line-height: 50rpx;
        padding: 0 40rpx;
    }
    .btn-box {
        padding: 40rpx;
        .cancel-btn {
            width: 248rpx;
            height: 70rpx;
            border: 1rpx solid rgba(234, 182, 99, 1);
            border-radius: 35rpx;
            font-size: 28rpx;
            font-family: PingFang SC;
            font-weight: 500;
            color: rgba(234, 182, 99, 1);
            background-color: #fff;
        }
        .agree-btn {
            width: 300rpx;
            height: 70rpx;
            background: linear-gradient(90deg, rgba(233, 181, 97, 1), rgba(238, 204, 138, 1));
            border-radius: 35rpx;
            font-size: 28rpx;
            font-family: PingFang SC;
            font-weight: 500;
            color: rgba(255, 255, 255, 1);
        }
    }
    .ic-hide {
        position: absolute;
        font-size: 50rpx;
        bottom: -100rpx;
        z-index: 11;
        color: #fff;
        left: 50%;
        transform: translateX(-50%);
    }
}

.head_box {
    width: 750rpx;
    // background: #fff;
    transition: all linear 0.3s;

    /deep/.cuIcon-back {
        display: none;
    }

    .nav-title {
        font-size: 38rpx;
        font-family: PingFang SC;
        font-weight: 500;
        color: #fff;
    }
}
</style>
